<script lang="ts" setup>
import {computed, getCurrentInstance, onMounted, provide, reactive, ref} from "vue";
import loadComponent from "@/view/activity/components/loading.vue";

const {proxy} = getCurrentInstance() as any; // 类似于this
const toback = () => {
  proxy.$router.go(-1)
}
const list = ref(
    [{
      name: "用户",
      invite_count: '0',
      money: '0',
    },
      {
        name: "用户",
        invite_count: '0',
        money: '22',
      },
      {
        name: "用户",
        invite_count: '0',
        money: '0',
      }]
)
const type = ref(1)
const title = ref('前10排名')
const loading = ref(false)
const invitedCode = ref('')
let invitedList = computed(()=>{
  return [
    `赛盾新春活动，智能加速通道，名校课程、音乐MV任性看，无延迟更清晰！填写邀请码：${invitedCode.value}，难得的福利时刻，活动期内尽情免费使用，无后顾之忧。`,
    `快来参加赛盾限时活动，智能分流技术，海外课堂、音乐库瞬间访问，学习娱乐随心切换！填写我的邀请码：${invitedCode.value}，独家福利来袭，活动中免费使用，绝不容错过！`,
    `赛盾新春红包雨来袭！海外视听资源双向加速，不卡顿、不掉线，品质体验即刻拥有！填写邀请码：${invitedCode.value}，畅享活动特权，免费尝试，高质量体验近在咫尺。`,
    `千万红包等你领！专线护航，学习、观影、听歌畅通无阻，让您的时间更有价值！填写我的邀请码：${invitedCode.value}，赛盾活动特惠，无需支付，直接免费使用，轻松畅享！`,
    `赛盾新春活动，深度加速技术，海外音乐视频一气呵成，畅享高速时代！填写我的邀请码：${invitedCode.value}，尊享特权不用花钱，锁定免费年会员名额，就差你来！`,
    `赛盾新春特惠，高带宽专线支持，内容一键直达，不再为缓冲烦恼！填写我的邀请码：${invitedCode.value}，稀缺名额释放中，年会员零成本领取，先占先赢！`,
    `春节大红包，特权专线升级，国际资源无障碍访问，精彩不断、畅享无限！填写邀请码：${invitedCode.value}，新的起点，从赛盾免费年会员开始，先到者享！`,
    `赛盾春节活动开始啦！顶级专线赋能，视频课件瞬时加载，学习效率大幅提升！填写邀请码：${invitedCode.value}，免费开通年会员，无需等待，谁快谁得！`,
    `赛盾新春限时活动，悄然提速，让海外视频、音乐、学习内容自然而然流畅呈现。填写邀请码：${invitedCode.value}，抢到即赚到，限量免费年会员等你来拿！`,
    `赛盾大红包等你来！轻松升级网络，海外资源 quietly 加速，观看与学习更平稳。填写邀请码：${invitedCode.value}，先人一步，免费获取一年会员尊享权益！`,
    `赛盾新春送红包，安静加速，无需声张，海外视频、课程悄然顺畅体验。填写邀请码：${invitedCode.value}，零费用入手年会员，机会难得，抓住当下！`,
    `赛盾春节活动，无需华丽辞藻，默默加速访问，带来宁静却有效的提升。填写我的邀请码：${invitedCode.value}，年会员限量免费领取，行动快者轻松拥有全年特权!`,
    `赛盾新春活动，不声不响的改善，让观看内容的每一帧都更舒适自然。填写邀请码：${invitedCode.value}，不花一分，让你全年轻松畅享优质服务，先到先得！！`,
    `赛盾新春红包，无形保障，让画面清晰度得以保持。填写邀请码：${invitedCode.value}，邀请好友助力，一起拼红包！`,
    `赛盾春节大礼包火爆开启，稳定加速体验，让你的网络表现更出色。填写邀请码：${invitedCode.value}，年度会员免费开抢，数量有限，先下手为强！`,
    `新春活动火爆开启，不必费力等待，让资源呈现更快速，学习资料快速浏览，信息获取更便捷。填写我的邀请码：${invitedCode.value}，领取赛盾年会员先到先得！`,
    `新春送福利，专线支持，减少卡顿，提高加载速度，海量学习资料，轻松查阅，无后顾之忧。填写邀请码：${invitedCode.value}，活动期间赛盾会员免费使用！`,
    `赛盾新春限时活动，邀请好友领取千万现金红包！专线加速引擎，全网海外资源畅通无阻，轻松一点就上！填写我的邀请码：${invitedCode.value}，助我一臂之力吧！`,
    `新春来临，千万红包等你拿！极速传输管道，海外视频、音乐、课程全程流畅，学习娱乐两不误！填写我的邀请码：${invitedCode.value}，邀请好友助力我一起拿大奖！`,
    `赛盾春节大放送，一键开启专属加速，全球热门视频音频快速直达，轻松告别卡顿！填写我的邀请码：${invitedCode.value}，邀请好友一起领取现金红包！`,
    `新春大红包，等你来抢！高速专线护航，海外热门平台轻松访问，娱乐学习更高效！填写我的邀请码：${invitedCode.value}，快来帮我一起领取现金奖励！`,
    `🌟 喜从天降！不论何处，访问更稳定的全球内容，为你的娱乐与研究之路减轻负担。填写我的邀请码 ${invitedCode.value}，一起赢现金红包，秒提现！快来助我一臂之力吧！🎉`,
    `🏮 新春大礼等你拿！专业支持，让你畅享各类资源，提升信息检索速度，让学习更高效。填写邀请码 ${invitedCode.value}，千元红包不是梦，速来助攻！🧧`,
    `🔥 红包雨来袭！更快的网络，带来更高的工作与娱乐效率。输入邀请码 ${invitedCode.value}，立享无门槛现金奖励，提现无障碍！💸`,
    `🌈 天降鸿福，流畅访问，多彩资源轻松呈现，无需担心卡顿，轻松沉浸数字世界。输入 ${invitedCode.value} 邀请码，红包直达你的账户，快快助我完成目标！💎`,
    `兔年开门红，加速你的网络，享受更高质量的连接，让你的浏览如行云流水般顺畅。${invitedCode.value}，立刻抢新年红包！`,
    `限时活动开启！减少不必要的延迟，集中于真正重要的部分，让你的设备在信息世界中疾速穿行。用邀请码${invitedCode.value}加入，红包大奖等你拿！`,
    `兔年大吉，清晰音频与流畅视频，让体验更愉悦，轻松链接，让你的创造与探索更畅快。邀请码${invitedCode.value}，千万红包等你来分！`,
    `兔年福利大派送！无需宣传，只用稳定表现征服你。邀请码${invitedCode.value}，快来领取新春红包！`,
    `新春惊喜不等人！低调而高效，让你的在线生活悄然提速。输入${invitedCode.value}，马上参与活动！`,
    `新迎兔年福气满满！轻松访问海外资源，减少等待，用更短时间获取有用信息。用邀请码${invitedCode.value}，领取你的专属红包！`,
    `兔年福利到，高速访问，无需等待，直达重点内容。快输入我的邀请码${invitedCode.value}，新年好礼送到家！`,
    `兔年好运势不可挡！每次轻点，感受无阻畅连，如同置身世界中央。输入${invitedCode.value}，限时红包等你领！`,
    `限时福利不容错过！让网络更贴近你的使用需求，放心遨游。快输入我的邀请码${invitedCode.value}，抢新年红包大奖！`,
    `兔年惊喜升级！不需声张，只用顺畅表现打动你。快来使用我的邀请码${invitedCode.value}，新春红包先到先得！`,
    `兔年喜气洋洋！从音乐到学术，从纪录片到网课，我们的优化策略让所有内容更易触及。输入${invitedCode.value}，马上开启你的红包之旅！`,
    `限时福利快抢！更聪明的连接方式，让你的每次访问都有所提升。邀请码${invitedCode.value}，红包雨就在眼前！`,
    `新年狂欢模式开启，从此不再为加载条发愁，直达目标内容。输入${invitedCode.value}，专属红包等着你！`,
  ]
})
//全部信息
let userInfo:any = ref({})
provide('loading', loading)
let rankingInfo: any = reactive({
  data: {
    my_invite_count:0,
    my0_ranking:0,
    my_ranking:0,
    id:'',
  }
})
const changeType = (val) => {
  type.value = val
  if (type.value == 1) {
    list.value = rankingInfo.data.ranking0
  } else {
    list.value = rankingInfo.data.ranking
  }
}
const getRanking = async () => {
  await proxy.$API.User.getRank({token: localStorage.getItem('token'), activity: 1}).then(res => {
    rankingInfo.data = res.result
    if (type.value == 1) {
      list.value = rankingInfo.data.ranking0
    } else {
      list.value = rankingInfo.data.ranking
    }
    loading.value = false;
  })
}
const copyTxt = ()=>{
  let num = Math.ceil(Math.random() * (invitedList.value.length-1))
  let txt = `\r\n下载链接：${userInfo.value.download_link}，\r\n请复制到浏览器下载,\r\n\r\n 备用链接1：${userInfo.value.backup1_download_link},\r\n\r\n备用链接2：${userInfo.value.backup2_download_link},\r\n官网链接：${userInfo.value.gw},\r\nPC:复制浏览器下载哦`
  proxy.$tool.onClickCopy(invitedList.value[num]+txt,'邀请链接已复制，快去邀请好友吧')
}
const geiInfo = async () => {
  await proxy.$API.User.geiInfo({token: localStorage.getItem('token')}).then(res => {
    invitedCode.value = res.result.invite_code
    userInfo.value = res.result
    loading.value =false
  })
}
onMounted(() => {
  loading.value = true;
  geiInfo()
  getRanking()
})
</script>

<template>
  <div class="ranking">
    <loadComponent></loadComponent>
    <img alt="" class="back" src="@/assets/images/activityImg/back.png" @click="toback">
    <div class="title"></div>
    <div class="p"></div>
    <div class="rank">
      <div :class="type==1?'btm2':'btm3'" @click="changeType(1)">周榜</div>
      <div :class="type==2?'btm2':'btm3'" @click="changeType(2)">月榜</div>
    </div>
    <div class="v1">
      <div class="vt1">-{{ list[1].name }}-</div>
      <div class="vt2">已邀请{{ list[1].invite_count }}人</div>
    </div>
    <div class="v2">
      <div class="vt1">-{{ list[0].name }}-</div>
      <div class="vt2">已邀请{{ list[0].invite_count }}人</div>
    </div>
    <div class="v3">
      <div class="vt1">-{{ list[2].name }}-</div>
      <div class="vt2">已邀请{{ list[2].invite_count }}人</div>
    </div>
    <div class="r1">
      <div class="txt">{{ list[1].money }}<span>元</span></div>
    </div>
    <div class="r2">
      <div class="txt">{{ list[0].money }} <span>元</span></div>
    </div>
    <div class="r3">
      <div class="txt">{{ list[2].money }} <span>元</span></div>
    </div>
    <div class="tai">
      <div class="txt1 txts">亚军</div>
      <div class="txt2 txts">冠军</div>
      <div class="txt3 txts">季军</div>
    </div>
    <div class="list">
      <div class="head">{{ title }}</div>
      <div v-for="(v,i) in list" v-show="i>2" :key="i" :class="i%2==1?'item1':'item2'" class=" item">
        <div class="t1">{{ i + 1 }}</div>
        <div class="t2"></div>
        <div class="t3">{{ v.name }}</div>
        <div class="t4">已邀请：{{ v.invite_count }}人</div>
        <div class="t5">提现{{ v.money }}元</div>
      </div>
    </div>
    <div class="btmRank">
      <div class="heads"></div>
      <div class="mid">
        <div class="txtd">用户{{ rankingInfo.data.id}}</div>
        <div class="txtd2">已邀请{{ rankingInfo.data.my_invite_count }}人-
          <span v-if="type==1">{{rankingInfo.data.my0_ranking==0?'未上周榜':'已上周榜'}}</span>
          <span v-if="type==2">{{rankingInfo.data.my_ranking==0?'未上月榜':'已上月榜'}}</span>
        </div>
      </div>
      <div class="right" @click="copyTxt">
        去邀请
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ranking::-webkit-scrollbar {
  width: 0;
}

.ranking {
  width: 375px;
  height: auto;
  font-size: 20px;
  background-image: url("@/assets/images/ranking/bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 100px;

  .back {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 13px;
    top: 14px;
    z-index: 11;
  }

  .title {
    width: 90px;
    height: 29px;
    background-image: url("@/assets/images/ranking/title.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 142px;
    top: 41px;
  }

  .p {
    width: 52px;
    height: 61px;
    background-image: url("@/assets/images/ranking/p.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 33px;
    top: 76px;
    z-index: 1;
  }

  .rank {
    width: 249px;
    height: 38px;
    background-image: url("@/assets/images/ranking/btm1.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 64px;
    top: 93px;
    justify-content: center;
    display: flex;
    z-index: 2;

    .btm2 {
      width: 50%;
      height: 38px;
      background-image: url("@/assets/images/ranking/btm2.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 15px;
    }

    .btm3 {
      width: 50%;
      height: 38px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 15px;

    }

  }

  .v1 {
    overflow: hidden;
    width: 95px;
    height: 119px;
    position: absolute;
    background-image: url("@/assets/images/ranking/v3.png");
    background-repeat: no-repeat;
    background-size: 95px 119px;
    left: 45px;
    top: 190px;
    z-index: 2;

    .vt1 {
      width: 70px;
      height: 11px;
      margin-top: 71px;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: #7B5CDA;
      line-height: 18px;
    }

    .vt2 {
      width: 70px;
      height: 11px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: rgba(48, 48, 48, 1);
      line-height: 18px;
      transform: scale(.8);
      transform-origin: top;
    }
  }

  .v2 {
    overflow: hidden;
    width: 130px;
    height: 127px;
    position: absolute;
    background-image: url("@/assets/images/ranking/v1.png");
    background-repeat: no-repeat;
    background-size: 130px 127px;
    left: 144px;
    top: 170px;
    z-index: 2;

    .vt1 {
      width: 83px;
      height: 13px;
      margin-top: 68px;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: rgba(254, 73, 127, 1);
      line-height: 18px;
    }

    .vt2 {
      width: 83px;
      height: 11px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: rgba(48, 48, 48, 1);
      line-height: 18px;
      transform: scale(.8);
      transform-origin: top;
    }
  }

  .v3 {
    overflow: hidden;
    width: 102px;
    height: 118px;
    position: absolute;
    background-image: url("@/assets/images/ranking/v2.png");
    background-repeat: no-repeat;
    background-size: 102px 118px;
    left: 261px;
    top: 202px;
    z-index: 2;

    .vt1 {
      width: 70px;
      height: 11px;
      margin-top: 71px;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: rgba(200, 110, 253, 1);
      line-height: 18px;
    }

    .vt2 {
      width: 70px;
      height: 11px;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 11px;
      color: rgba(48, 48, 48, 1);
      line-height: 18px;
      transform: scale(.8);
      transform-origin: top;
    }
  }

  .tai {
    width: 332px;
    height: 69px;
    background-image: url("@/assets/images/ranking/tai.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 21px;
    top: 295px;
    font-family: txtP, sans-serif;;
    z-index: 3;
    color: white;
    white-space: nowrap;

    .txts {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .txt1 {
      width: 27px;
      height: 11px;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
      line-height: 23px;
      position: absolute;
      left: 43px;
      top: 43px
    }

    .txt2 {
      width: 27px;
      height: 11px;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
      line-height: 23px;
      position: absolute;
      left: 152px;
      top: 37px
    }

    .txt3 {
      width: 27px;
      height: 11px;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
      line-height: 23px;
      position: absolute;
      left: 261px;
      top: 47px
    }
  }

  .r1 {
    width: 34px;
    height: 31px;
    font-family: black, "Niagara Engraved", sans-serif;
    background-image: url("@/assets/images/ranking/r1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 31px;
    top: 289px;
    z-index: 11;

    .txt {
      position: absolute;
      bottom: -5px;
      left: 34px;
      width: 48px;
      //height: 13px;
      font-weight: 400;
      font-size: 21px;
      line-height: 22px;
      text-stroke: 1px #985F13;
      background: linear-gradient(0deg, #F8B439 0%, #FDD250 43.5546875%, #FCB331 100%);
      -webkit-text-stroke: 1px #985F13;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      flex-basis: unset;
      align-items: baseline;

      span {
        font-size: 13px;
      }
    }
  }

  .r2 {
    font-family: black, "Niagara Engraved", sans-serif;
    width: 62px;
    height: 41px;
    background-image: url("@/assets/images/ranking/r2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 125px;
    top: 266px;
    z-index: 11;

    .txt {
      position: absolute;
      bottom: -5px;
      left: 34px;
      width: 88px;
      //height: 13px;
      font-weight: 400;
      font-size: 30px;
      line-height: 22px;
      text-stroke: 1px #985F13;
      background: linear-gradient(0deg, #F8B439 0%, #FDD250 43.5546875%, #FCB331 100%);
      -webkit-text-stroke: 1px #985F13;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      flex-basis: unset;
      align-items: baseline;

      span {
        font-size: 18px;
      }
    }
  }

  .r3 {
    font-family: black, "Niagara Engraved", sans-serif;
    width: 26px;
    height: 26px;
    background-image: url("@/assets/images/ranking/r3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 261px;
    top: 305px;
    z-index: 11;

    .txt {
      position: absolute;
      bottom: -5px;
      left: 24px;
      width: 48px;
      //height: 13px;
      font-weight: 400;
      font-size: 21px;
      line-height: 22px;
      text-stroke: 1px #985F13;
      background: linear-gradient(0deg, #F8B439 0%, #FDD250 43.5546875%, #FCB331 100%);
      -webkit-text-stroke: 1px #985F13;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      flex-basis: unset;
      align-items: baseline;

      span {
        font-size: 13px;
      }
    }
  }

  .list {
    width: 344px;
    height: 367px;
    font-family: sans-serif;
    margin: 365px auto 0;
    overflow: hidden;
    background-image: url("@/assets/images/ranking/bg2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    font-size: 13px;

    .head {
      width: 100%;
      height: 29px;
      margin: 5px auto 10px;
      background-image: url("@/assets/images/ranking/heng.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      white-space: nowrap;
      line-height: 25px;
    }

    .item1 {
      width: calc(100% - 50px);
      padding: 0 25px;
      height: 36px;
      background: rgba(224, 236, 255, 1);
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
    }

    .item2 {
      width: calc(100% - 50px);
      padding: 0 25px;
      height: 36px;
      background: white;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
    }

    .item {
      align-items: center;

      .t1 {
        width: 20px;
      }

      .t2 {
        width: 14px;
        height: 18px;
        background-image: url("@/assets/images/ranking/user.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .t3 {
        width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        color: rgba(48, 48, 48, 1);
        text-overflow: ellipsis;
      }

      .t4 {
        width: 82px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis;
      }

      .t5 {
        width: 82px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis;
      }
    }
  }

  .btmRank {
    width: calc(100% - 13px - 27px);
    height: 80px;
    position: fixed;
    padding: 0 27px 0 13px;
    left: 0;
    bottom: 0;
    z-index: 13;
    background-image: url("@/assets/images/ranking/bg3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    display: flex;

    .heads {
      width: 50px;
      height: 50px;
      background-image: url("@/assets/images/ranking/heads.png");
      background-repeat: no-repeat;
      margin-right: 10px;
      background-size: 100% 100%;
    }

    .mid {
      width: 179px;
      height: 50px;

      .txtd {
        width: 100%;
        height: 18px;

        font-weight: bold;
        font-size: 18px;
        color: #000000;
        line-height: 13px;
        background: linear-gradient(180deg, #3FBBFE 0%, #A541FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
      }

      .txtd2 {
        width: 100%;
        height: 14px;

        font-weight: 400;
        font-size: 15px;
        color: #515151;
        line-height: 13px;
      }
    }

    .right {
      width: 97px;
      height: 34px;
      background-image: url("@/assets/images/ranking/btm5.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      font-family: txtP, 'Microsoft YaHei', sans-serif;
      font-weight: 400;
      font-size: 15px;
      color: #FEFEFE;
      line-height: 21px;
      text-shadow: 0 0 9px rgba(75, 123, 235, 0.6);
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
